<html>
    <head>
        <meta charset="UTF-8">
        <title>事件对象</title>
        <style type = "text/css">
            #areaDiv
            {
                width: 300px;
                height: 100px; 
                background-color: white;   
            }

            #showMsg
            {
                width: 300px;
                height: 50px;
                background-color: white;   
            }

            #box1
            {
                width: 10px;
                height: 10px;
                background-color: turquoise;
                /*
                    开启box1的绝对定位
                */
                position: absolute;
            }
        </style>

        <script type="text/javascript">
           window.onload = function()
           {
                var areaDiv = document.getElementById("areaDiv");
                var showDiv = document.getElementById("showMsg");

                /*
                    onmousemove
                        该事件在鼠标在元素中移动时被调用

                    事件对象
                        当事件的响应被触发时，浏览器每次都会将一个事件对象作为参数传递进响应函数
                */

                //解决事件对象兼容性
                event = event || window.event;
                var st = document.body.scrollTop || document.documentElement.scrollTop;
                var sl = document.body.scrollLeft || document.documentElement.scrollLeft;

                areaDiv.onmousemove = function(event)
                {
                    var x = event.clientX;
                    var y = event.clientY;

                    showDiv.innerHTML = "x =" + x + "y = " + y;
                }


                /*
                    让div跟随鼠标移动
                */
               var box1 = document.getElementById("box1");
               document.onmousemove = function(event)
               {
                   /*
                    clientX和clientY获取鼠标当前的坐标
                        是相对于可见窗口的位置
                        div是相对与整个页面的
                   */

                    //    var left = event.clientX;
                    //    var top = event.clientY;

                    /*
                        pageX和pageY获取整个页面的位置坐标
                    */

                    var left = event.pageX;
                    var top = event.pageY;
                   box1.style.left = left + sl + "px";
                   box1.style.top = top + st + "px";
               }
            }
        </script>
    </head>

    <body style = "height : 1000px">
        <div id = "areaDiv"></div>
        <div id = "showMsg"></div>
        <div id = "box1"></div>
    </body>
</html>